<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
    //<![CDATA[
    var customIcons = {
      event: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
      },
      you: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
      }
    };
    
    var markers = [];
    var infoWindow;
    var idx = 0;

    function load() {
      var point = new google.maps.LatLng(
                        parseFloat(<?php echo $location->latitude; ?>),
                        parseFloat(<?php echo $location->longitude; ?>));
      var map = new google.maps.Map(document.getElementById("map"), {
        center: point,
        zoom: 11,
        mapTypeId: 'roadmap'
      });
      infoWindow = new google.maps.InfoWindow;
      
      google.maps.event.addListener(map, 'dragend', function() {
        clearEvents()
        searchEvents(map);
      });
      
      var icon = customIcons['you'] || {};
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        animation: google.maps.Animation.DROP,
        icon: icon.icon,
        shadow: icon.shadow
      });
      bindInfoWindow(marker, map, "You are here");
            
      var circle = new google.maps.Circle({
        center: point,
        map: map,
        radius: 5000,
        strokeColor: "#01a0df",
        fillColor: "#01a0df",
        fillOpacity: 0.13
      });
      searchEvents(map);
      
    }
    
    function clearEvents(){
      infoWindow.close();
      for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(null);
      }
      markers.length = 0;
      idx = 0;
    }
    
    function searchEvents(map){
			$('div#cajaeventos > div.scroll').html("");
      var url = '/index.php/nearevent/near?lat='+map.getCenter().lat()+'&lng='+map.getCenter().lng();
			$.ajax({
				type: "GET",
				url: url,
				dataType: "xml",
				success: function(xml) {
					$(xml).find('marker').each(function(){
            var bounds = new google.maps.LatLngBounds();
						var id = $(this).attr('id');
						var name = $(this).attr('name');
						var description = $(this).attr('description');
						var address = $(this).attr('address');
						var zip_code = $(this).attr('zip_code');
						var username = $(this).attr('username');
						var user_id = $(this).attr('user_id');
						var complete_name = $(this).attr('complete_name');
            var point = new google.maps.LatLng(
                parseFloat($(this).attr('lat')),
                parseFloat($(this).attr('lng')));
						var distance = $(this).attr('distance');

            var mod = $('<div id= "mod_'+id+'" class="modulo"></div>');
            $('<a href="#"></a>').html('<img src="/images/mod.jpg" width="53" height="32" align="right">').appendTo(mod);
            $('<img src="/images/events_transparent.gif" width="65" height="64" hspace="0" vspace="0" align="left">').appendTo(mod);
            $('<span class="tipo"></span>').html('Tipo de Lugar').appendTo(mod);
            $('<br />').appendTo(mod);
            $('<span class="nombre"></span>').html(name).appendTo(mod);
            $('<br />').appendTo(mod);
            $('<span class="descripcion"></span>').html(description).appendTo(mod);
            $('div#cajaeventos > div.scroll').append(mod);
 
            var html = "<span class='azul'>" + name + "</span> <br/>" + description;
            var icon = customIcons['event'] || {};
            var marker = new google.maps.Marker({
              map: map,
              position: point,
              animation: google.maps.Animation.DROP,
              icon: icon.icon,
              shadow: icon.shadow
            });
            markers[idx] = marker;
            idx++;
            bindInfoWindow(marker, map, html, 'mod_'+id);

					});
				}
			});

    }
    
    function bindInfoWindow(marker, map, html, el) {
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
      });

      $('#'+el).click(function(event){
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
      });
    }

    $(document).ready(function() {
      load();
    });
    //]]>
	</script>
    <br />
    <div id="barramenu" style="float:left">
    <div id="bhome" style="float:left"><img src="/images/b_home_on.jpg" width="66" height="40"></div>
    <div id="bmydoor" style="float:left"><img src="/images/x.gif" width="82" height="40"></div>
    <div id="binbox" style="float:left"><img src="/images/x.gif" width="61" height="40"></div>
    <div id="bchat" style="float:left"><img src="/images/x.gif" width="170" height="40"></div>
    <div id="inboxglobe" style="float:left"><span style="font-family:arial; font-weight: bold; color:#FFF; font-size: 10px;">28</span></div>
    <input name="concss" type="text" class="clase2" onBlur="this.value='type neighborhood, building or restaurant...'" onFocus="if (this.value=='type neighborhood, building or restaurant...') this.value='';" style="float: left; width: 250px;" value="type neighborhood, building or restaurant...">
    <input type="image" src="/images/b_search.jpg" id="botonbusqueda" height="20" width="66" border="0" alt="Buscar" style="float:left">
    </div>    
    <div id="espaciado" style="float:left"></div>
  
    <div id="busquedaciudad" style="float:left">  
      <div id="botones" style="float:left"><img src="/images/botones.jpg" width="262" height="72" border="0" usemap="#Map">
        <map name="Map"><area shape="rect" coords="200,4,257,69" href="#"><area shape="rect" coords="135,4,192,69" href="#"><area shape="rect" coords="135,4,192,69" href="#"><area shape="rect" coords="69,4,126,69" href="#">
          <area shape="rect" coords="5,4,62,69" href="#">
        </map>
      </div>
      <input type="text" name="concss" class="clase" style="float:left">
      <input type="image" src="/images/b_buscadorciudad.jpg" id="botonbusquedaciudad" height="20" width="23" border="0" alt="Buscar" style="float:left">
      <div id="searchbycity" style="float:left"><img src="/images/searchbycity.jpg" width="98" height="13"></div>
    </div>
  
    <div id="contenedorcontent">
  
    <div id="mapa" style="float:left"><div id="map" style="width: 545px; height: 330px"></div></div>
  
    <div id="espaciadohorizontal" style="float:left"></div>
  
    <div id="cajaeventos">
      <div class="scroll">
        <div class="modulo">
          <a href="#">
            <img src="/images/mod.jpg" width="53" height="32" align="right">
          </a>
          <img src="/images/people_transparent.gif" width="65" height="64" hspace="0" vspace="0" align="left">
          <span class="tipo">Tipo de Lugar</span><br />
          <span class="nombre">Nombre del lugar</span><br />
          <span class="descripcion">Descripción</span>
        </div>
        <div class="moduloseleccionado" style="float:left"><a href="#"><img src="/images/remove.gif" width="53" height="32" align="right"></a><img src="/images/places_transparent.gif" width="65" height="64" hspace="0" vspace="0" align="left"><span style="font-family:arial; font-weight: bold; font-size: 14px;">Tipo de Lugar</span>
        <br><span style="font-family:arial; font-weight: bold; font-size: 18px;">Nombre del lugar</span>
        <br><span style="font-family:arial; font-weight: normal; font-size: 10px;">Descripción</span>
        </div>
        <div class="modulo" style="float:left"><a href="#"><img src="/images/mod.jpg" width="53" height="32" align="right"></a><img src="/images/events_transparent.gif" width="65" height="64" hspace="0" vspace="0" align="left"><span style="font-family:arial; font-weight: bold; font-size: 14px;">Tipo de Lugar</span>
        <br><span style="font-family:arial; font-weight: bold; font-size: 18px;">Nombre del lugar</span>
        <br><span style="font-family:arial; font-weight: normal; font-size: 10px;">Descripción</span>
        </div>
        <div class="modulo" style="float:left"><a href="#"><img src="/images/mod.jpg" width="53" height="32" align="right"></a><img src="/images/news_transparent.gif" width="65" height="64" hspace="0" vspace="0" align="left"><span style="font-family:arial; font-weight: bold; font-size: 14px;">Tipo de Lugar</span>
        <br><span style="font-family:arial; font-weight: bold; font-size: 18px;">Nombre del lugar</span>
        <br><span style="font-family:arial; font-weight: normal; font-size: 10px;">Descripción</span>
        </div>
        <div class="modulo" style="float:left"><a href="#"><img src="/images/mod.jpg" width="53" height="32" align="right"></a><img src="/images/people_transparent.gif" width="65" height="64" hspace="0" vspace="0" align="left"><span style="font-family:arial; font-weight: bold; font-size: 14px;">Tipo de Lugar</span>
        <br><span style="font-family:arial; font-weight: bold; font-size: 18px;">Nombre del lugar</span>
        <br><span style="font-family:arial; font-weight: normal; font-size: 10px;">Descripción</span>
      </div>
    </div> 
    </div>
  </div>
